import { h, render } from "vue"
import MyMessage from "./index.vue"
// 往body中系只能一个盒子,目的是同时只能出现一次消息弹层


function Message({ type, text, duration = 2000 }) {
  // 如果要像elui一样点击就创建 并且多次点击创建多个可以帮创建放在里面
  // 往body中新增一个盒子 =>为了代码中
  const divContainer = document.createElement('div')
  divContainer.classList.add('message-container')
  document.body.appendChild(divContainer)
 
  // 1. 创建虚拟dom
  // const vNode = h(MyMessage, { type, text })
  const vNode = h(MyMessage, { type, text })
  // 2. 动态render
  render(vNode, divContainer)
  // 定义延时器
  let timer
  if(timer){
    clearTimeout(timer)
  }
  // 3. 开启一个延时器,到时间就隐藏
  timer = setTimeout(() => {
   render(null, divContainer)
   }, duration)
 }
 Message.success = (text, duration=1500) => {
  Message({
   text,
   type: 'success',
   duration
  })
 }
 Message.error = (text, duration=1500) => {
  Message({
   text,
   type: 'error',
   duration
  })
 }
 Message.warning = (text, duration=1500) => {
  Message({
   text,
   type: 'warning',
   duration
  })
 }
 console.log(Message);
export default Message